import React ,{Component}from 'react';
import ReactDOM from 'react-dom';
import 'element-theme-default';
import {IndexLink,Link,Route} from 'react-router-dom';
import { Dialog,Form,Input,Button} from 'element-react';
import OldSchoolMenuLink from './OldSchoolMenuLink'
import Axios from 'axios';
import $ from 'jquery';


class Header extends Component{
	constructor(props) {
        super(props);

         this.state = {
            form: {
            pass: '',
            id:'',
            },
            rules: {
                pass: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { validator: (rule, value, callback) => {
                    if (value === '') {
                        callback(new Error('请输入密码'));
                    } else {
                        callback();
                    }
                    } }
                ],
                id: [
                    { required: true, message: '请输入账号', trigger: 'blur' },
                    { validator: (rule, value, callback) => {
                    if (value === '') {
                        callback(new Error('请输入账号'));
                    }else {
                        callback();
                    }
                    } }
                ],
            },
            regform:{
                regid:'',
                regpass:'',
                checkPass:'',
            },
            regrules:{
                regid:[
                    {required:true,message:'请输入帐号',trigger:'blur'},
                    { validator: (rule, value, callback) => {
                        if (value === '') {
                            callback(new Error('请输入帐号'));
                        } else {
                            var reg=/^[0-9]{5,11}$/;
                            if(reg.test(value)){
                                callback();
                            }else{
                                callback(new Error('账号格式不对！'));
                            }
                            
                        }
                    } }
                ],
                regpass: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { validator: (rule, value, callback) => {
                        if (value === '') {
                            callback(new Error('请输入密码'));
                        } else {
                            if (this.state.regform.checkPass !== '') {
                                this.refs.regform.validateField('checkPass');
                            }
                            callback();
                        }
                        } }
                    ],
                checkPass: [
                    { required: true, message: '请再次输入密码', trigger: 'blur' },
                    { validator: (rule, value, callback) => {
                    if (value === '') {
                        callback(new Error('请再次输入密码'));
                    } else if (value !== this.state.regform.regpass) {
                        callback(new Error('两次输入密码不一致!'));
                    } else {
                        callback();
                    }
                    } }
                ],
            }
        };
    }
    onChange(key, value) {
        this.setState({
            form: Object.assign({}, this.state.form, { [key]: value })
        });
    }
    onChangereg(key, value) {
        this.setState({
            regform: Object.assign({}, this.state.regform, { [key]: value })
        });
    }
    handleSubmit(e) {
        e.preventDefault();
        this.refs.form.validate((valid) => {
            if (valid) {
                var id=this.state.form.id;
                var password=this.state.form.pass;
                var msg = document.getElementById('login-msg');
                Axios({
                    method:'post',
                    url:'http://10.31.160.62:3000/users/login',
                    data:{
                        id:id,
                        password:password
                    },
                     headers: {
                        'Content-Type': 'application/json;charset=UTF-8'
                    },
                    dataType:'json',
                }).then(function(data){
                    if(data.data.err !=''){
                        msg.style.visibility='visible';
                    }else{
                        localStorage.setItem('id',id);
                        window.location.href='/';
                        console.log(localStorage.getItem('id'));
                    }
                })
            } else {
                console.log('error submit!!');
            return false;
            }
        });
    }
    regSubmit(e) {
        e.preventDefault();
        this.refs.regform.validate((valid) => {
            if (valid) {
                var id=this.state.regform.regid;
                var password=this.state.regform.regpass;
                Axios({
                    method:'post',
                    url:'http://10.31.160.62:3000/users/register',
                    data:{
                        id:id,
                        password:password
                    }, 
                    dataType:'json',
                }).then(function(data){
                    var msg = document.getElementsByClassName('reg-msg')[0];
                    var dialog =document.getElementsByClassName('login-dialog')[0];
                    var regdialog = document.getElementsByClassName('reg-dialog')[0];
                    if(data.err!=''){
                        msg.style.visibility='visible';
                    }
                    if(data.msg!=''){
                        dialog.style.display='block';
                        regdialog.style.display='none';
                    }

                })
            } else {
                console.log('error submit!!');
                return false;
            }
        });
    }
	render(){
		return (
			<div>
				<div className="mod_header">
					<div className="section_inner">
						<h1 className="qqmusic_title">
							<a>
								<img src="../src/images/public/logo.png"/>
							</a>
						</h1>
						<ul className="mod_top_nav">
							<li className="top_nav__item top_nav__item--room active"><OldSchoolMenuLink activeOnlyWhenExact={true} to="/" label="音乐馆"/></li>
							<li className="top_nav__item top_nav__item--mine"><OldSchoolMenuLink to="/memusic" label="我的音乐"/></li>
							<li className="top_nav__item top_nav__item--down">下载客户端</li>
							<li className="top_nav__item top_nav__item--vip">VIP</li>
						</ul>
						<div className="mod_top_search">
							<div className="mod_search_input">
								 <input type="text" className="search_input__input" placeholder="金曲捞"/>
								 <button className="search_input__btn">
								 	<i className="el-icon-search"></i>
								 </button>
							</div>
						</div>
						<div className="header__opt">
							<div className="mod_top_login">
								<span className="top_login__link js_login pointer noin">登录</span>
								<span className="top_login__link js_login pointer getin"></span>
								<span className="exit">退出</span>
								<span className="mod_btn_green top_login__btn_vip1 pointer">开通绿钻豪华版</span>
								<span className="top_login__btn_vip pointer">开通付费包</span>
							</div>
						</div>
					</div>
				</div>
				 <div className="loginmodal"></div>
                <div className="login-dialog">
                    <div className="login-title">
                        <span>QQ登录</span><span>微信登录</span>
                        <a className="dialog-close">
                            <i className="el-icon-close"></i>
                        </a>
                    </div>
                    <div className="dialog-body">
                        <h2>帐号密码登录</h2>
                        <p>推荐使用快速安全登录，防止盗号</p>
                        <p id="login-msg">你输入的帐号或密码不正确，请重新输入。</p>
                        <Form ref="form" model={this.state.form} rules={this.state.rules} labelWidth="0" className="demo-ruleForm">
                            <Form.Item prop="id">
                                <Input type="text"  value={this.state.form.id} onChange={this.onChange.bind(this, 'id')} autoComplete="off" placeholder="账号"/>
                            </Form.Item>
                            <Form.Item  prop="pass">
                                <Input type="password" value={this.state.form.pass} onChange={this.onChange.bind(this, 'pass')} autoComplete="off" placeholder="密码"/>
                            </Form.Item>
                            <Form.Item>
                                <Button type="success" onClick={this.handleSubmit.bind(this)}  className="dialog-btnlogin">登录</Button>
                            </Form.Item>
                        </Form>
                    </div>
                    <div className="dialog-footer">
                        <p>
                            <span>忘记密码？</span>|<span className="toReg">注册新帐号</span>|<span>意见反馈</span>
                        </p>
                    </div>
                </div>
                <div className="reg-dialog">
                    <div className="reg-title">
                        <span>注册</span>
                        <a href="javascript:;" className="reg-close">
                            <i className="el-icon-close"></i>
                        </a>
                    </div>
                    <div className="reg-body">
                        <p className="reg-msg">该用户名已存在</p>
                        <Form ref="regform" model={this.state.regform} rules={this.state.regrules} labelWidth="0" className="regForm">
                            <Form.Item prop="regid">
                                <Input type="text"  value={this.state.regform.regid} onChange={this.onChangereg.bind(this, 'regid')} autoComplete="off" placeholder="5-11位的纯数字"/>
                            </Form.Item>
                            <Form.Item  prop="regpass">
                                <Input type="password" value={this.state.regform.regpass} onChange={this.onChangereg.bind(this, 'regpass')} autoComplete="off" placeholder="密码"/>
                            </Form.Item>
                            <Form.Item prop="checkPass">
                                <Input type="password" value={this.state.regform.checkPass} onChange={this.onChangereg.bind(this, 'checkPass')} autoComplete="off" placeholder="确认密码"/>
                            </Form.Item>
                            <Form.Item>
                                <Button type="success" onClick={this.regSubmit.bind(this)}  className="dialog-btnreg">注册</Button>
                            </Form.Item>
                        </Form>
                    </div>
                    <div className="reg-footer">
                        <p>
                            <span className="toLogin">登录</span>|<span>意见反馈</span>
                        </p>
                    </div>
                </div>
			</div>
		)
	}
	  componentDidMount(){
		var id = localStorage.getItem('id');
		if(id!=null){
			$('.noin').css('display','none');
			$('.getin').css('display','block');
			$('.exit').css('display','block');
			$('.getin').html(id);
		}else{
			$('.noin').css('display','block');
			$('.getin').css('display','none');
			$('.exit').css('display','none');
		}

		$('.exit').on('click',function(){
			$(this).css('display','none');
			$('.getin').css('display','none');
			$('.noin').css('display','block');
			localStorage.removeItem('id');
		})	

        var btn = document.getElementsByClassName('noin')[0];
        var modal = document.getElementsByClassName('loginmodal')[0];
        var dialog =document.getElementsByClassName('login-dialog')[0];
        var btnclose =document.getElementsByClassName('dialog-close')[0];
        btn.onclick=function(){
            modal.style.display='block';
            dialog.style.display="block";
            document.body.style.overflow="hidden";
        }
        btnclose.onclick=function(){
            modal.style.display='none';
            dialog.style.display="none";
            document.body.style.overflow="auto";
        }
        var btnToreg = document.getElementsByClassName('toReg')[0];
        var btnTologon = document.getElementsByClassName('toLogin')[0];
        var btnregclose = document.getElementsByClassName('reg-close')[0];
        var regdialog = document.getElementsByClassName('reg-dialog')[0];
        btnToreg.onclick=function(){
            dialog.style.display='none';
            regdialog.style.display="block";
        }
        btnTologon.onclick=function(){
            dialog.style.display='block';
            regdialog.style.display="none";
        }
        btnregclose.onclick=function(){
            modal.style.display='none';
            regdialog.style.display="none";
            document.body.style.overflow="auto";
        }
    }
}
export default Header;